<template>
  <div class="map-wrapper">
    <div :id="id" @contextmenu.prevent="backMapPrince" :style="{ height: height, width: width }" />
  </div>
</template>

<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

export default {
  components: {},
  props: {
    width: {
      type: String,
      default: '600px'
    },
    height: {
      type: String,
      default: '600px'
    },
  },
  data() {
    return {
      id: '', // 元素动态id
      oBox: '', // 元素本身
      myChart: null, // 地图实例
      regionInfo: []
    }
  },
  computed: {
    regionIdArr() {
      return this.$store.state.common.regionIdArr
    }
  },
  watch: {},
  created() {
    this.id = uuidv1() // 保证id是唯一的
  },
  mounted() {
    // 1.获取dom元素
    this.oBox = document.getElementById(this.id)
    // 2.实例化echarts
    this.myChart = echarts.init(this.oBox)
  },
  activated() { },
  updated() { },
  destroyed() {
    if (!this.myChart) {
      return
    }
    // 1.销毁echarts实例
    this.myChart.dispose()
    // 2.置为null
    this.myChart = null
    // 3.移除resize事件
    window.removeEventListener('resize', this.chartResize)
  },
  methods: {
    // 1.初始化地图
    async initMap(geojson, options, regionInfo) {
      this.regionInfo = regionInfo
      // 0.判断是否有实例
      if (!this.myChart) {
        this.myChart = echarts.init(this.oBox)
      }
      // 1.加载地图
      await this.loadMap(geojson, options)
    },

    // 2.地图加载
    loadMap(geojson, options) {
      // 0.销毁实例 这个地方必须销毁实例,否则后面单击事件时会执行两边
      if (this.myChart) {
        this.myChart.dispose()
        this.myChart = echarts.init(this.oBox)
      }
      // 1. 注册地图
      echarts.registerMap('geoMap', geojson)

      // 2.配置设置
      this.myChart.setOption(options)

      // 3. 图表自适应
      window.addEventListener('resize', this.chartResize)

      // 4.单击下钻
      this.clickHandle()
    },
    // 3.点击事件
    clickHandle() {
      this.myChart.on('click', (params) => {
        // 0.判断：如果点击的是市区域就是进入相应的市地图
        if (
          params.componentSubType === 'map'
        ) {
          // 1.区不能下钻
          if (this.regionIdArr.length === 2) {
            console.warn('已经到头了,不能下钻了')
            return
          }

          // 2.获取城市当前名字和城市id
          //   const currentRegionName = params.name
          //   const currentRegionInfo = this.regionInfo.find((item, val) => {
          //     if (currentRegionName === item.regionName) {
          //       return item
          //     }
          //   })

          // 3.没有站点的区域也是不能下钻的
          //   if (!currentRegionInfo || currentRegionInfo.activeCount === 0) {
          //     console.warn('没有站点不能下钻')
          //     return
          //   }

          // 4.处理省市数组regionIdArrs数据
          // 动态
          // const regionIdArrs = Object.assign([], this.regionIdArrs) // 防止深度拷贝改变vuex中的值
          //   if (this.regionIdArrs.length === 1) {
          //     regionIdArrs.push({ regionIds: currentRegionId, regionNames: currentRegionName })
          //   } else {
          //     regionIdArrs.pop()
          //   }
          // 静态
          let currentRegionId, currentRegionName;  // 后期动态的
          const regionIdArrs = Object.assign([], this.regionIdArrs)
          if (this.regionIdArr.length === 1) {
            regionIdArr.push({ regionId: '430100', regionName: '某某市' })
            currentRegionId = '430100'
            currentRegionName = '某某市'
          } else {
            currentRegionId = '430000'
            currentRegionName = '湖南省'
            regionIdArr.splice(0, 1)
          }

          // 5.点击市，提交全局的市数据
          this.$store.commit('updateRegionIdArr', regionIdArr)
          this.$store.commit('updateRegionId', currentRegionId)
          this.$store.commit('updateRegionName', currentRegionName)
        } else {
          // 1.获取当前点击的站点名
          //   const currentStationName = params.name
          //   const currentstations = this.stationInfo.find((item, val) => {
          //     if (currentStationName === item.name) {
          //       return item
          //     }
          //   })
          //   const currentstationId = currentstations.id
          //   const currentstationCode = currentstations.stationCode
          //   this.$store.commit('stationCodeUpdate', currentstationCode)
          //   this.$store.commit('stationIdUpdate', currentstationId)
          //   this.$store.commit('stationNameUpdate', currentStationName)
          //   // 2.进入相应的站点页面
          //   this.$router.push({
          //     name: 'station',
          //     params: {
          //       id: currentstationId
          //     }
          //   })
        }
      })
    },
    // 5. 鼠标右击返回省级
    backMapPrince() {
      const regionIdArr = Object.assign([], this.regionIdArrs).splice(0, 1)
      this.$store.commit(
        'updateRegionId',
        regionIdArr[0].regionId
      )
      this.$store.commit(
        'updateRegionName',
        regionIdArr[0].regionName
      )
      this.$store.commit(
        'updateRegionIdArr',
        regionIdArr
      )
    },
    showLoading() {
      this.myChart.showLoading()
    },
    hideLoading() {
      this.myChart.hideLoading()
    },
    // 图表重绘方法
    chartResize() {
      this.myChart && this.myChart.resize()
    }
  }
}

</script>
<style scoped lang="scss">
.map-wrapper {
  width: 100%;
  height: 100%;
}
</style>
